<template>
	<a-modal
		:visible="visible"
		:confirm-loading="confirmLoading"
		:title="
			item && item.id * 1 > 0 ? '修改商户`' + item.name + '`' : '添加商户 '
		"
		ok-text="确认保存"
		:mask-closable="false"
		:width="800"
		@cancel="onClose"
		@ok="handleSubmit"
	>
		<a-form-model
			ref="formInline"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:model="formInline"
			:rules="rules"
			@submit="handleSubmit"
		>
			<a-button v-show="false" html-type="submit" />
			<a-form-model-item label="批发市场" prop="market_id">
				<a-select
					v-model="formInline.market_id"
					show-search
					placeholder="请选择批发市场"
					style="width: 100%"
					:filter-option="false"
					:not-found-content="fetching ? undefined : null"
					@search="fetchMarket"
				>
					<a-spin v-if="fetching" slot="notFoundContent" size="small" />
					<a-select-option v-for="d in marketList" :key="d.value">
						{{ d.text }}
					</a-select-option>
				</a-select>
			</a-form-model-item>

			<a-form-model-item label="所属区域" prop="map_area_id">
				<a-select
					v-model="formInline.map_area_id"
					show-search
					placeholder="请选择所属区域"
					style="width: 100%"
					:filter-option="false"
					:not-found-content="fetching ? undefined : null"
					@search="fetchArea"
				>
					<a-spin v-if="fetching" slot="notFoundContent" size="small" />
					<a-select-option
						v-for="d in areaList"
						:key="d.value"
						:value="d.value"
					>
						{{ d.text }}
					</a-select-option>
				</a-select>
			</a-form-model-item>

			<a-form-model-item label="商户名称" prop="name">
				<a-input
					v-model="formInline.name"
					:max-length="32"
					placeholder="请输入商户名称"
				/>
			</a-form-model-item>

			<a-form-model-item label="商户编号" prop="code">
				<a-input
					onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
					v-model="formInline.code"
					:max-length="32"
					placeholder="请输入商户编号"
				/>
			</a-form-model-item>

			<a-form-model-item label="商户电话" prop="phone">
				<a-input v-model="formInline.phone" placeholder="请输入商户电话" />
			</a-form-model-item>

			<a-form-model-item label="商户别名" prop="alias">
				<a-input v-model="formInline.alias" placeholder="请输入商户别名" />
			</a-form-model-item>

			<a-form-model-item label="联系人" prop="contact">
				<a-input v-model="formInline.contact" placeholder="请输入商户别名" />
			</a-form-model-item>

			<a-form-model-item label="租户ID" prop="owner_id">
				<a-input-number
					v-model="formInline.owner_id"
					placeholder="请输入租户ID"
				/>
			</a-form-model-item>

			<a-form-model-item label="运营地址">
				<app-tree-select
					v-model="formInline.area_code"
					radio
					:code="$e.city"
					style="width: 100%"
					@change="(data) => (formInline.area_name = data.area_name_all)"
				/>
			</a-form-model-item>

			<a-form-model-item :wrapper-col="buttonCol">
				<a-input
					v-model="formInline.address"
					:max-length="255"
					placeholder="地址"
				/>
			</a-form-model-item>

			<a-form-model-item label="经纬度">
				<a-space>
					<a-input
						v-model="formInline.lat"
						:max-length="128"
						placeholder="经度"
					/>
					<a-input
						v-model="formInline.lng"
						:max-length="128"
						placeholder="纬度"
					/>
					<a-tooltip title="获取经纬度">
						<a-icon type="environment" @click="mapVisible = true" />
					</a-tooltip>
				</a-space>
				<app-map-getpoint
					v-model="mapVisible"
					:latitude="formInline.lat * 1"
					:longitude="formInline.lng * 1"
					@change="
						(latitude, longitude) => {
							formInline.lat = latitude + ''
							formInline.lng = longitude + ''
						}
					"
				/>
			</a-form-model-item>

			<a-divider />

			<a-form-model-item label="商家类型" prop="type">
				<a-input v-model="formInline.type" placeholder="请输入商家类型" />
			</a-form-model-item>

			<a-form-model-item label="税号" prop="tax_number">
				<a-input v-model="formInline.tax_number" placeholder="请输入税号" />
			</a-form-model-item>

			<a-form-model-item label="银行账户" prop="bank">
				<a-input v-model="formInline.bank" placeholder="请输入银行账户" />
			</a-form-model-item>

			<a-form-model-item label="社会统一代码" prop="credit_code">
				<a-input
					v-model="formInline.credit_code"
					placeholder="请输入社会统一代码"
				/>
			</a-form-model-item>

			<a-form-model-item label="经营类目" prop="bus_category">
				<a-input
					v-model="formInline.bus_category"
					placeholder="请输入社会统一代码"
				/>
			</a-form-model-item>

			<a-divider />

			<a-form-model-item label="简介">
				<a-textarea
					v-model="formInline.introduction"
					style="margin-top: 10px"
					:auto-size="{ minRows: 3 }"
				/>
			</a-form-model-item>

			<a-form-model-item label="备注">
				<a-textarea
					v-model="formInline.remark"
					style="margin-top: 10px"
					:auto-size="{ minRows: 3 }"
				/>
			</a-form-model-item>

			<a-form-model-item :wrapper-col="buttonCol">
				<a-switch
					v-model="formInline.status_flag"
					checked-children="状态: 启用"
					un-checked-children="状态: 未启用"
					@change="
						(val) => {
							formInline.status = val ? 1 : 0
						}
					"
				/>
			</a-form-model-item>
		</a-form-model>
	</a-modal>
</template>

<script>
	import merchant from "@/api/merchant"
	import salemarket from "@/api/salemarket"
	import areaHttp from "@/api/area"
	import debounce from "lodash/debounce"

	export default {
		model: {
			//event:什么时候触发v-model行为
			event: "change-visible",
			// 定义传递给v-model的那个变量，绑定到哪个属性值上
			prop: "visible",
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			item: {
				type: Object,
				default: () => {
					return {
						id: 0,
						status: 1,
					}
				},
			},
		},
		data() {
			this.fetchMarket = debounce(this.fetchMarket, 800)
			return {
				rules: {
					market_id: [{ required: true, trigger: "change", message: "市场必填" }],
					map_area_id: [
						{ required: true, trigger: "change", message: "区域必填" },
					],
					name: [{ required: true, trigger: "change", message: "名称必填" }],
					phone: [{ required: true, trigger: "change", message: "电话必填" }],
				},
				buttonCol: { span: 18, offset: 4 },
				labelCol: { span: 4 },
				wrapperCol: { span: 18 },
				confirmLoading: false,

				formInline: {
					...this.item,
				},

				mapVisible: false,

				uploadImageLoading: false,

				marketList: [],
				areaList: [],
				fetching: false,
			}
		},
		watch: {
			visible: function (showFlag) {
				if (!showFlag) return
				console.table({
					item: this.item,
				})
				this.formInline = {
					status_flag: this.item.status == 1,
				}
				for (let ii in this.item) {
					this.$set(this.formInline, ii, this.item[ii])
				}
				if (!this.formInline.market_id || this.formInline.market_id * 1 <= 0) {
					// this.formInline.market_id = undefined
				}
				if (!this.formInline.map_area_id || this.formInline.map_area_id === 0) {
					this.formInline.map_area_id = undefined
				}
				console.log(this.formInline, this.item)
				this.fetchMarket()
			},

			"formInline.market_id"(a, b) {
				console.table({
					a,
					b,
				})
				if (a) {
					this.areaList = []

					console.log(this.formInline)
					this.fetchArea(a)
				}

				if (a && b) {
					this.formInline.map_area_id = undefined
				}
			},
		},
		created() {},
		mounted() {},
		methods: {
			onClose() {
				this.$emit("change-visible", false)
			},
			onChange() {
				this.onClose()
				this.$emit("change")
			},
			async handleSubmit(e) {
				e.preventDefault()

				let flag = undefined
				this.$refs.formInline.validate((valid) => (flag = valid))
				if (!flag) {
					return
				}

				this.confirmLoading = true

				if (this.$func.isNumber(this.item.id) && this.item.id * 1 > 0) {
					await merchant
						.update(this.item.id, this.formInline)
						.then((response) => {
							if (response.code !== 1) {
								this.$message.error(response.message)
								return
							}
							this.$message.success(response.message)
							this.onChange()
							return
						})
					this.confirmLoading = false
					return
				}

				await merchant.create(this.formInline).then((response) => {
					if (response.code !== 1) {
						this.$message.error(response.message)
						return
					}
					this.$message.success(response.message)
					this.onChange()
					return
				})

				this.confirmLoading = false
			},
			async fetchArea(market_id) {
				console.log(market_id)
				this.areaList = []
				this.fetching = true

				await areaHttp
					.query({
						market_id,
						full_flag: 1,
					})
					.then((response) => {
						console.log("区域数据", response)
						console.log(this.formInline)
						if (response.code !== 1) {
							this.$message.warning(response.message)
							return
						}
						response.data.forEach((element) => {
							this.areaList.push({
								value: element.id,
								text: element.name,
							})
						})
					})
				this.fetching = false
			},
			async fetchMarket(value) {
				// this.formInline.map_area_id = undefined
				this.marketList = []
				this.fetching = true

				await salemarket
					.query({
						searchkey: value,
					})
					.then((response) => {
						if (response.code !== 1) {
							this.$message.warning(response.message)
							return
						}
						response.data.forEach((element) => {
							this.marketList.push({
								...element,
								value: element.id,
								text: element.name,
							})
						})
					})
				this.fetching = false
			},
		},
	}
</script>

<style lang="less" type="text/less" scoped>
	.ant-form-item {
		margin-bottom: 6px;
	}
</style>
